<!--
/**
* Author: gaohui
* Date: 2023-03-02 15:07
* Desc: ProvideComp provide组件
*/
-->

<template>
  <title-line title="provide基础用法" />
  <div class="parent-comp-container">
    <div class="mt10 mb10">父组件提供的名称：{{ name }}</div>
    <child-comp />
  </div>
  <div class="mt10">
    <el-button @click.stop="changeName">修改名称</el-button>
  </div>
</template>

<script name="ProvideComp" lang="ts" setup>
import { ref, provide } from "vue";
import ChildComp from "./Components/ChildComp.vue";

// provide配合inject使用。可用于组件层级太深时，跨层级传输数据，避免层层define props
// 提供响应式的值
const name = ref("Mike");
provide("name", name);

const changeName = () => {
  name.value = "Jack";
};
</script>
<style lang="scss" scoped>
.parent-comp-container {
  height: 300px;
  padding: 20px;
  box-sizing: border-box;
  border-radius: 8px;
  border: 1px solid #999999;
}
</style>
